<template>
  	<div class="div">
    	<PageTitle title="普通用户列表"></PageTitle>
		<el-button type="primary" v-if="user_state == 1" @click="Export" size="small">导出</el-button>
    	<el-table stripe :data="tableData">
			<el-table-column prop="openid" label="openid"></el-table-column>
			<el-table-column prop="nikname" label="微信昵称">
        		<template slot-scope="scope">{{ headList[scope.row.index] }}</template>
      		</el-table-column>
      		<el-table-column label="微信头像">
				<template slot-scope="scope">
					<img
						:src="scope.row.headimgurl"
						@click="handlePictureCardPreview(scope.row.headimgurl)"
						class="list-img"
					/>
				</template>
      		</el-table-column>
			<!-- <el-table-column
				prop="orderCount"
				label="订单数量">
			</el-table-column>-->
			<!-- <el-table-column
				prop="orderCount"
				label="退单数量">
			</el-table-column>-->
			<!-- <el-table-column
				prop="orderPrice"
				label="订单金额(元)">
			</el-table-column>-->
			<el-table-column label="手机号">
				<template slot-scope="scope">{{ scope.row.mobile ? scope.row.mobile : '暂无' }}</template>
			</el-table-column>
      		<el-table-column label="余额">
				<template slot-scope="scope">
					<div class="balance">
						<div class="btn">
							<el-popover placement="left" width="100" trigger="click">
								{{money}}
								<el-button
								@click="revise(scope.row.openid)"
								slot="reference"
								type="primary"
								size="mini"
								>查看</el-button>
							</el-popover>
						</div>
					</div>
				</template>
      		</el-table-column>
      		<el-table-column prop="create_at" label="创建时间"></el-table-column>
			<!-- <el-table-column
				label="操作"
				width="140">
			<template slot-scope="scope">
				<router-link
				:to="'/merchantList/merchantDetail/' + scope.row.id"
				class="color-theme margin-right"
				@click.native="goToDetail"
				>查看</router-link>
			</template>
			</el-table-column>-->
    	</el-table>
    	<div class="pagination-wrapper">
			<el-pagination
				layout="prev, pager, next"
				@current-change="pageChange"
				:page-size="pageSize"
				:total="totalCount"
				:current-page="pageNum"
			></el-pagination>
    	</div>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" />
		</el-dialog>
  	</div>
</template>

<script>
	import PageTitle from "@/components/pageTitle/PageTitle.vue";
	export default {
		name: "merchantList",
		components: {
			PageTitle
		},
		activated() {
			this._getList();
		},
		data() {
			return {
				tableData: [],
				money:0,//余额
				headList: [],
				pageNum: 1,
				totalCount: 0,
				pageSize: 10,
				dialogImageUrl: "",
				dialogVisible: false,
				user_state:localStorage.getItem('user_state')
			};
		},
  		methods: {
			//数据导出
    		Export(){
      			this.$confirm('是否导出表中存在手机号的数据?', '提示', {
      		    	confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
        		}).then(() => {
					console.log('确定导出')
					let token = localStorage.getItem('token')
					if (this.tableData.length>0) {
						location.href = 'http://admin.youjingxi.com.cn/v1/channel/menber?token=' + token
					}
        			
        		}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});          
        		});
			},
    		//余额
			async revise(openid) {
				this.money = '正在查询请稍等。。'
				let data = await this.$axios({
					url:this.$api + "/v1/deliver/money",
					method: "GET",
					params: {
						openid:openid
					}
				})
				this.money = data.data.data.money
				/* console.log(this.tableData)
				console.log('余额-------------',data) */
			},
    		async _getList() {
      			let {data: { data, code }} = await this.$axios({
					url: this.$api + "/v1/payment/member",
					method: "GET",
					params: {
						size: this.pageSize,
						page: this.pageNum,
					}
      			});
      			if (code == 0) {
        			if (data.items) {
						this.tableData = data.items.map((item, index) => {
							item.index = index;
							return item;
						});
						this.totalCount = parseInt(data.page.totalCount);
						this.headList = data.nikname;
        			}
				} else {
					this.tableData = [];
				}
    		},
			pageChange(pageNum) {
				this.pageNum = pageNum;
				this._getList();
			},
			handlePictureCardPreview(src) {
				this.dialogImageUrl = src;
				this.dialogVisible = true;
			}
  		}
	};
</script>

<style lang="scss" scoped>
.list-img {
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.el-button--text {
  text-decoration: none;
}
.balance {
  width: 250px;
  display: flex;
  align-items: center;
}
.balance .btn button {
  width: 50px;
  padding: 0;
  height: 40px;
}
</style>
